<!--
 * @Descripttion:
 * @version:
 * @Author: caiailing
 * @Date: 2023-04-07 09:49:11
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-04-07 11:39:08
-->
<script setup lang="ts">
import tabBarList from './tabBar.js'
import { forward } from '@/utils/router/router'
const { tabBarActiveIndex, changeTabBarActiveIndex } = useStore('user')
const change5 = (number: number): void => {
  changeTabBarActiveIndex(number)
  forward(tabBarList[number].name)
}
</script>

<template>
  <u-tabbar
    :value="tabBarActiveIndex"
    :fixed="true"
    :safe-area-inset-bottom="true"
    :placeholder="true"
    @change="change5"
  >
  <block :key="index" v-for="(item,index) in tabBarList">
      <u-tabbar-item :text="item.text" >
      <template #active-icon>
        <image
          class="u-page__item__slot-icon"
          :src="item.iconPath"
        ></image>
      </template>
      <template #inactive-icon>
        <image
          class="u-page__item__slot-icon"
          :src="item.selectedIconPath"
        ></image>
      </template>
    </u-tabbar-item></block>

  </u-tabbar>
</template>

<style lang="scss"></style>
